<template>
  <div class="flex flex-col gap-2">
    <Textarea :readonly="record?.componentProps?.readonly" v-model:value="data" :rows="5" />
    <Button @click="handleEdit">编辑</Button>
    <ExprModal @register="registerModal" @success="handleSuccess" />
  </div>
</template>
<script setup lang="ts">
  import { ref, computed, PropType } from 'vue';
  import { pluginManager } from '/@/views/formDesigner/utils';
  import { ExprModal } from '/@/components/CustomComp';
  import { useModal } from '/@/components/Modal';

  const Textarea = pluginManager.getComponent('textarea');
  const Button = pluginManager.getComponent('button');

  const emit = defineEmits(['update:modelValue']);
  const props = defineProps({
    modelValue: {
      type: String as PropType<String>,
      default: '',
    },
    record: {
      type: Object as PropType<Object>,
      default: () => {
        return {};
      },
    },
  });
  const data = computed({
    get() {
      console.log('props', props);
      console.log('props.modelValue', props.modelValue);
      return props.modelValue;
    },
    set(e) {
      console.log('eee', e);
      emit('update:modelValue', e);
    },
  });
  const [registerModal, { openModal }] = useModal();

  //   const visible = ref(false);
  const handleEdit = () => {
    // visible.value = true;
    // console.log('handleEdit visible', visible.value);
    openModal(true, {
      expr: data.value, // || '表单 表单1 * 表单11*表单12+SUM(1,2) AVG(99,21) IF()'
      isUpdate: true,
    });
  };
  const handleSuccess = (val) => {
    console.log('handleSuccess-FormulaInput', val);
    data.value = val;
  };
</script>
